<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://localhost:8082/webjars/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="show"></div>
    <form id="myform" enctype="multipart/form-data" method="post" action="/image/upload.action">
        <input type="text" id="imgData" name="imgData" >
        <input type="file" id="file" name="file" onchange="showImg()">
        <input type="submit" id="save" name="save" value="保存图片" >
    </form>
    <img src="">
    <img src="">
    <img src="">

<script>
    function showImg() {
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function (e) {
            //获取图片的base64字符串
            var imgBase64Data = e.target.result;
            alert(imgBase64Data);
            //移除原先的图片
            $("img").remove();
            //显示选择的图片
            $("#show").append("<img src=\""+imgBase64Data+"\"/>");
            //截取字符串
            var head = imgBase64Data.indexOf("4")+2;
            imgBase64Data = imgBase64Data.substring(head,imgBase64Data.length-head);
            //将字符串中的'+'替换为'%2B'防止传过去变为空格
            //var reg = new RegExp("\\+","g");
            //imgBase64Data = imgBase64Data.replace(reg,"%2B");
            //存储参数到隐藏表单域
            $("#imgData").val(imgBase64Data);
        }
    }

    function saves() {
        var data = $("#imgData").val();
        alert(data);
        $("#myform").attr("action","localhost:8082/image/upload.action?imgData="+data);

        $("#myform").submit();

    }

</script>
</body>
</html>
